<template>
  <view class="df-cc" @click="$emit('click')">
    <view class="circle df-cc" :class="{ active: value }"></view>
    <view class="text-less-color-1">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'k-radio',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style scoped lang="scss">
.circle {
  margin-right: 10rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  position: relative;
  background: #bfbfbf;
  &:after {
    content: "";
    width: 8rpx;
    height: 8rpx;
    background: #ffffff;
    border-radius: 50%;
  }
}
.active {
  background: $base-color;
}
</style>
